<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <title>加盟共享</title>
    <script type="text/javascript">
    	(function () {
		    //设置页面的rem大小
		    document.addEventListener('DOMContentLoaded', function () {
		        var html = document.documentElement;
		        var windowWidth = html.clientWidth;
		        html.style.fontSize = windowWidth /7.5 + 'px';
		    }, false);
		    window.onresize = function(){
		        var html = document.documentElement;
		        var windowWidth = html.clientWidth;
		        html.style.fontSize = windowWidth /7.5 + 'px';
		    };
		})();
    </script>
	<style type="text/css">
		html {
			font-family: arial;
			line-height: 1.15;
			-ms-text-size-adjust: 100%;
			-webkit-text-size-adjust: 100%
		}
		* {
			margin: 0;
			padding: 0
		}
		ul,li{
			list-style: none;
		}
		.g-flex {
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
		}

		.g-flex-auto {
			-webkit-flex: 1;
			-moz-flex: 1;
			flex: 1;
		}

		.tabBox{
			font-size: .3rem;
		}
		.tabList{
			background: #6f91f3;
			height: .7rem;
			line-height: .7rem;
		}
		.tabList ul li{
			text-align: center;
			position: relative;
		}
		.tabList ul li.active .active_line{
			display: block;
		}
		.tabList a{
			color: #fff;
			text-decoration: none;
			height: .7rem;
			line-height: .7rem;
			outline: none;
			display: block;
			-webkit-tap-highlight-color:transparent
		}
		.active_line{
			background: #fff;
			width: .65rem;
			height: .08rem;
			position: absolute;
			bottom:0;
			left:50%;
			margin-left: -.325rem;
			display: none;
		}
		.tabCont{
			display: none;
		}
		.tabCont ul li{
			border-bottom: 1px solid rgba(178, 178, 178, 0.38);
		}
		.tabCont ul li strong{
			display: block;
			line-height: .4rem;
			padding: .3rem 1rem .3rem .3rem ;
			font-weight: 500;
			position: relative;
			/*border-bottom: 1px solid #*/
		}
		.tabCont_details{
			background: #eee;
			padding: .3rem;
			line-height: .4rem;
			color: #676767;
			font-size:.28rem;
			display: none;
			text-align:justify
		}
		.tabCont_details span{
			display: block;
		}
		.icon_btn{
			width: .36rem;
			height: .36rem;
			position: absolute;
			right: .3rem;
			top: 50%;
			margin-top: -.18rem;
		}
		.icon_show{
			background: url("__PUBLIC__/img/plus@3x.png") no-repeat center;
			background-size: 100%;
		}
		.icon_unshow{
			background: url("__PUBLIC__/img/minus@3x.png") no-repeat center;
			background-size: 100%;
		}
	</style>
</head>
<body>
<div class="tabBox">
	<div class="tabList">
		<ul class="g-flex">
			<li class="g-flex-auto active">
				<a href="javascript:;">借还款相关</a>
				<i class="active_line"></i>
			</li>
			<li class="g-flex-auto">
				<a href="javascript:;">信息审核</a>
				<i class="active_line"></i>
			</li>
			<li class="g-flex-auto">
				<a href="javascript:;">费用说明</a>
				<i class="active_line"></i>
			</li>
		</ul>
	</div>
	<div class="tabCont" style="display: block;">
		<volist name="data" id="vs">
		<ul>

			<li>
				<strong>{$vs.question}<i class="icon_btn icon_show"></i></strong>
				<div class="tabCont_details">{$vs.reply}</div>
			</li>

		</ul>
		</volist>
	</div>
	<div class="tabCont">
		<volist name="res" id="vs1">
		<ul>
			<li>
				<strong>{$vs1.question}<i class="icon_btn icon_show"></i></strong>
				<div class="tabCont_details">{$vs1.reply}</div>
			</li>

		</ul>
		</volist>
	</div>
	<div class="tabCont">
		<volist name="list" id="vs2">
		<ul>
			<li>
				<strong>{$vs2.question}<i class="icon_btn icon_show"></i></strong>
				<div class="tabCont_details">{$vs2.reply}</div>
			</li>
		</ul>
		</volist>
	</div>
</div>
<script type="text/javascript" src="__PUBLIC__/js/zepto.js"></script>
<script type="text/javascript">
	$(".tabList ul li").on("click",function(){
		var i = $(this).index();
		$(this).siblings().removeClass("active");
		$(this).addClass("active");
		$(".tabCont").css("display","none");
		$(".tabCont").eq(i).css("display","block");
		$(".icon_btn").attr("class","icon_btn icon_show");
		$(".tabCont_details").css("display","none");
	})

    $(".tabCont strong").on("click",function(){
        var obj = $(this).next(".tabCont_details");
        if(obj.css("display") == "block"){
            $(this).find(".icon_btn").attr("class","icon_btn icon_show");
            obj.css("display","none");
        }else{
            $(".icon_btn").attr("class","icon_btn icon_show");
            $(".tabCont_details").css("display","none");
            $(this).find(".icon_btn").attr("class","icon_btn icon_unshow");
            obj.css("display","block");
        }
    })
</script>
</body>
</html>